<template>
	<!-- 实名 -->
  <view class="">
    <view class="main">
      <u-form :model="form" ref="uForm" >
      	<u-form-item label="姓名" prop="name" label-width="140" :border-bottom="true">
      		<u-input v-model="form.name" />
      	</u-form-item>
      	<u-form-item label="手机号" prop="phone" label-width="140" >
      		<u-input v-model="form.phone" />
      	</u-form-item>
        <u-form-item label="身份证号" prop="shen" label-width="140" >
        	<u-input v-model="form.shen" />
        </u-form-item>
      </u-form>   
      <view class="xiao">  
        请填写真实的姓名和身份证号,如果因为填写的身份证号信息有误,导致提现不到账,后果自负。
      </view> 
    </view>
  		     
      
  		<view class="btn" @click="setcard()">
  		      确认
  		    </view>
  	</view>
</template>

<script>
  export default {
  	data() {
  		return {
  			form: {
  				name: '',
  				phone: '',
          shen:''
  			},
  			rules: {
  				name: [
  					{ 
  						required: true, 
  						message: '请输入姓名', 
  						// 可以单个或者同时写两个触发验证方式 
  						trigger: ['change','blur'],
  					}
  				],
          phone: [
          	{ 
          		required: true, 
          		message: '请输入手机号', 
          		// 可以单个或者同时写两个触发验证方式 
          		trigger: ['change','blur'],
          	}
          ],
          shen: [
          	{ 
          		required: true, 
          		message: '请输入身份证号', 
          		// 可以单个或者同时写两个触发验证方式 
          		trigger: ['change','blur'],
          	}
          ],
  				
  			}
  		};
  	},
  	methods: {
  		submit() {
  			this.$refs.uForm.validate(valid => {
  				if (valid) {
  					console.log('验证通过');
  				} else {
  					console.log('验证失败');
  				}
  			});
  		}
  	},
  	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  	onReady() {
  		this.$refs.uForm.setRules(this.rules);
  	}
  };
</script>

<style lang="scss">
  .main{
    width: 680rpx;
    height: 845rpx;
    padding: 20rpx;
    background: #FFFFFF;
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    margin: 30rpx 15rpx;
    .xiao {
            width: 649rpx;
            height: 61rpx;
            font-size: 22rpx;
            font-weight: 500;
            color: #FF8742;
          }
  }
  .btn {
        width: 333rpx;
        height: 67rpx;
        line-height: 67rpx;
        text-align: center;
        background: #FFAC5A;
        border-radius: 34rpx;
        margin: 60rpx auto;
        color: #FFFFFF;
      }
</style>
